<template>
  <el-card class="box_card">
    <el-form
      class="router_form"
      ref="routerformRef"
      :rules="routerRules"
      :model="routerForm"
      label-width="110px"
    >
      <el-form-item label="父级菜单：">
        <el-cascader
          ref="cascaderRef"
          v-model="routerForm.parentId"
          :options="routerList"
          placeholder="请选择父级菜单"
          :props="{
            checkStrictly: true,
            label: 'title',
            value: 'id',
          }"
          clearable
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label="菜单名称：" prop="title">
        <el-input v-model="routerForm.meta.title"></el-input>
      </el-form-item>
      <el-form-item label="菜单图标：">
        <el-input v-model="routerForm.meta.icon"></el-input>
      </el-form-item>
      <el-form-item label="菜单排序：">
        <el-input
          type="text"
          oninput="value = value.replace(/[^\d]/g, '')"
          v-model="routerForm.sort"
        ></el-input>
      </el-form-item>
      <el-form-item label="路由名称：" prop="name">
        <el-input v-model="routerForm.name"></el-input>
      </el-form-item>
      <el-form-item label="路由跳转：" prop="path">
        <el-input v-model="routerForm.path"></el-input>
      </el-form-item>
      <el-form-item label="路由重定向：" prop="path">
        <el-input v-model="routerForm.redirect"></el-input>
      </el-form-item>
      <el-form-item label="组件路径：" prop="component">
        <el-input v-model="routerForm.component"></el-input>
      </el-form-item>
      <el-form-item label="是否隐藏菜单：">
        <el-switch v-model="routerForm.meta.hide" />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          v-if="!routerForm.id"
          @click="submitRouterForm('add')"
        >
          添加路由
        </el-button>
        <el-button type="primary" v-else @click="submitRouterForm('modify')">
          修改路由
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import {
  getRouterListApi,
  addRouterApi,
  findRouterApi,
  updateRouterApi,
} from '@/api/router'
import { useRoute, useRouter } from 'vue-router'
import { useRouteStore } from '@/store/modules/routeStore'
import { ElForm, ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()
const routeStore = useRouteStore()

const routerForm = reactive({
  parentId: [], // 该路由父级id
  meta: {
    title: '', // 菜单名称
    icon: '', // 导航栏图标
    hide: false, // 是否隐藏菜单
  },
  path: '', // 路由跳转路径
  sort: '', // 该路由的排序
  name: '', // 路由名
  redirect: '', // 路由重定向
  component: '', // 组件在文件中的路径
  id: '', // 路由ID
})
const routerRules = reactive({
  menuName: [
    {
      required: true,
      message: '请输入菜单名称',
      trigger: 'blur',
    },
  ],
  path: [
    {
      required: true,
      message: '请输入路由跳转路径',
      trigger: 'blur',
    },
  ],

  name: [
    {
      required: true,
      message: '请输入路由名称',
      trigger: 'blur',
    },
  ],
  component: [
    {
      required: true,
      message: '请输入文件中组件路径',
      trigger: 'blur',
    },
  ],
})
const routerformRef: any = ref<InstanceType<typeof ElForm>>()
const routerList = ref([])
const cascaderRef = ref()
onMounted(() => {
  init()
})

// > 初始化页面时加载的方法
const init = async () => {
  await getRouterList()
  if (route.query.id) {
    let res: any = await findRouterApi(route.query.id)

    routerForm.name = res.data.name
    routerForm.path = res.data.path
    routerForm.sort = res.data.sort
    routerForm.redirect = res.data.redirect
    routerForm.component = res.data.component
    routerForm.meta.title = res.data.meta.title
    routerForm.meta.icon = res.data.meta.icon
    routerForm.meta.hide = res.data.meta.hide
    routerForm.id = res.data.id
    routerForm.parentId = res.data.parentId
  }
}
const getRouterList = async () => {
  let res: any = await getRouterListApi()
  if (res.status == 0) {
    res.data.forEach((item: any) => {
      item.title = item.meta.title
    })
    routerList.value = res.data
  }
}

const submitRouterForm = (type: string) => {
  routerformRef.value.validate(async (valid: boolean) => {
    if (valid) {
      let data = JSON.parse(JSON.stringify(routerForm))
      if (!data.parentId) {
        data.parentId = []
      }
      if (data.sort) {
        data.sort = Number(data.sort)
      }
      let requst = null
      if (type == 'add') {
        requst = addRouterApi
      } else {
        requst = updateRouterApi
      }
      let res: any = await requst(data)
      if (res.status == 0) {
        ElMessage.success(`${type == 'add' ? '添加' : '修改'}路由成功`)
        routeStore.setRoutes()
        router.go(-1)
      }
    }
  })
}
</script>
<style lang="scss" scoped>
.box_card {
  margin: $mainMargin;

  .router_form {
    width: 300px;
  }
}
</style>
